<template>
  <div>
    <!-- <el-card class="box-card card-top" body-style="padding:10px">
      <h5>回复我的</h5>
    </el-card> -->
    <el-card class="box-card" body-style="padding:10px">
      <el-empty description="暂无评论" v-if="replyList.length==0"></el-empty>
      <div v-else v-for="rItem in replyList" :key="rItem.rId" class="box_cards">
        <!-- 头像 -->
        <img :src="rItem.uAvatar" alt="" class="box_cards_avatar">
        <div class="box_cards_content">
          <!-- 用户名 -->
          <div class="box_cards_content_first">
            <h4>{{rItem.username}}</h4>
            <!-- <span>回复了我的评论</span> -->
            <span>评论了我</span>
          </div>
          <!-- 评论内容 -->
          <div>{{rItem.rContent}}</div>
          <div class="box_cards_content_bottom">
            <p>{{common.changeTimeFormat(rItem.rTime)}}</p>
            <div>
              <i class="iconfont icon-xinxi"></i>
              <span>回复</span>
            </div>
            <!-- <div>
              <i class="iconfont icon-icon"></i>
              <span>点赞</span>
            </div> -->
            <div>
              <i class="el-icon-delete"></i>
              <span>删除该通知</span>
            </div>
          </div>
        </div>
          <img :src="rItem.pImg" alt="" class="box_cards_pImg">
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data(){
    return {
      userInfo:{},
      replyList:[]
    }
  },
  created(){
    this.getUserInfo()
  },
  methods:{
    // 获取用户信息
    getUserInfo () {
      const params = {}
      console.log(this.cookies.getToken('X-Token'))
      if (this.cookies.getToken('X-Token') != undefined) {
        params.token = this.cookies.getToken('X-Token')
        this.$axios.getUserInfo(params).then(res => {
          console.log(res)
          this.userInfo = res.data
          this.getReplyByuId(res.data.uId)
        })
        console.log(this.userInfo)
      } else {
        this.$router.push('/')
      }
    },
    getReplyByuId(uId){
      this.$axios.getReplyByuId(uId).then(res=>{
        console.log(res)
        this.replyList = res.data
      })
    }
  }
}
</script>

<style scoped>
  .box-card {
    margin-top: 20px;
  }
  .card-top {
    position: fixed;
    top: 60px;
    width: 950px;
  }
  .box_cards {
    padding: 20px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid rgb(241, 241, 241);
    display: flex;
    justify-content: space-between;
  }
  .box_cards_avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
  }
  .box_cards_content{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .box_cards_content_first {
    display: flex;
    align-items: center;
  }
  .box_cards_content_first>h4 {
    margin-right: 10px;
  }
  .box_cards_content_bottom {
    display: flex;
  }
  .box_cards_content_bottom>div {
    margin-left: 20px;
  }
  .box_cards_pImg {
    width: 100px;
    height: 80px;
  }
</style>
